Component({
  /**
   * 组件的属性列表
   */
  properties: {
    posterData: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的配置
   */
  options: {
    styleIsolation: 'isolated',
    pureDataPattern: /^_/
  },

  /**
   * 组件的初始数据
   */
  data: {
    house: {},
    user: {},
    bgImg: '',
    qrCode: '',
    selectIndex: 0,
  },

  /**
   * 组件的监听器
   */
  observers: {
    'posterData': function () {
      let t = this
      let {
        houseInfo = {},
          userInfo = {},
          bgImg = '',
          qrCode = ''
      } = t.data.posterData
      if (!(houseInfo && houseInfo.img && houseInfo.img.length)) {
        houseInfo.img = ['/images/defaultImgSmall.jpg']
      }
      t.setData({
        house: houseInfo,
        user: userInfo,
        bgImg,
        qrCode,
      })
    },
  },

  /**
   * 组件的生命周期
   */
  lifetimes: {
    attached: function () {

    },
    detached: function () {

    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onBtnPrev() {
      let t = this;
      let index = t.data.selectIndex - 1
      if (index < 0) {
        return
      }
      t.setData({
        selectIndex: index
      })
    },

    onBtnNext() {
      let t = this;
      let maxIndex = t.data.house.img.length - 1
      let index = t.data.selectIndex + 1
      if (index > maxIndex) {
        return
      }
      t.setData({
        selectIndex: index
      })
    },

    onSwiperChange(e) {
      let current = e.detail.current
      this.setData({
        selectIndex: current
      })
    },

    transmitPosterConfig() {
      let t = this;
      let {
        house,
        user,
        bgImg,
        qrCode,
        selectIndex
      } = t.data

      let selectImg = house.img[selectIndex]
      let posterConfig = t.createPosterConfig({
        house,
        user,
        bgImg,
        selectImg,
        qrCode
      })
      t.triggerEvent('transmit', posterConfig)
    },

    createPosterConfig({
      house,
      user,
      bgImg,
      selectImg,
      qrCode
    }) {
      return {
        width: '750rpx',
        height: '1354rpx',
        background: `${bgImg}`,
        views: [{
            type: 'image',
            url: `${selectImg}`,
            css: {
              top: '320rpx',
              left: '45rpx',
              borderRadius: '20rpx 20rpx 0 0',
              width: '660rpx',
              height: '450rpx',
            }
          }, {
            type: 'rect',
            css: {
              id: 'info-box',
              top: '770rpx',
              left: '45rpx',
              width: '660rpx',
              height: '440rpx',
              color: '#fff',
              borderRadius: '0 0 20rpx 20rpx',
            },
          }, {
            type: 'text',
            text: `${house.name}`,
            css: {
              width: '400rpx',
              top: "800rpx",
              left: '86rpx',
              fontSize: '40rpx',
              color: '#000',
              fontWeight: 'bold',
              maxLines: '1'
            }
          }, {
            type: 'text',
            text: `${house.address}`,
            css: {
              top: "810rpx",
              left: '600rpx',
              fontSize: '22rpx',
              color: '#666',
            }
          }, {
            type: 'text',
            text: `${house.price}`,
            css: {
              top: "867rpx",
              left: '87rpx',
              fontSize: '30rpx',
              color: '#F75353',
              fontWeight: 'bold',
            }
          },
          {
            type: 'text',
            text: `${house.structure}`,
            css: {
              top: "867rpx",
              left: '274rpx',
              fontSize: '30rpx',
              color: '#F75353',
              fontWeight: 'bold',
            }
          },
          {
            type: 'text',
            text: `${house.area}`,
            css: {
              top: "867rpx",
              left: '460rpx',
              fontSize: '30rpx',
              color: '#F75353',
              fontWeight: 'bold',
            }
          },
          {
            type: 'text',
            text: `${house.priceLabel}`,
            css: {
              top: "906rpx",
              left: '87rpx',
              fontSize: '22rpx',
              color: '#808080',
            }
          },
          {
            type: 'text',
            text: `${house.roomLabel}`,
            css: {
              top: "906rpx",
              left: '274rpx',
              fontSize: '22rpx',
              color: '#808080',
            }
          },
          {
            type: 'text',
            text: `${house.areaLabel}`,
            css: {
              top: "906rpx",
              left: '460rpx',
              fontSize: '22rpx',
              color: '#808080',
            }
          },
          {
            type: 'rect',
            css: {
              top: '970rpx',
              left: '75rpx',
              width: '600rpx',
              height: '2rpx',
              color: '#ebebeb',
            },
          },
          {
            type: 'image',
            url: `${user.avatar}`,
            css: {
              top: '1020rpx',
              left: '87rpx',
              width: '100rpx',
              height: '100rpx',
              borderRadius: '50rpx',
            }
          },
          {
            type: 'text',
            text: `${user.name}`,
            css: {
              width: '220rpx',
              top: "1010rpx",
              left: '210rpx',
              fontSize: '30rpx',
              color: '#666',
              fontWeight: 'bold',
              maxLines: '1'
            }
          },
          {
            type: 'text',
            text: `${user.phone}`,
            css: {
              top: "1060rpx",
              left: '210rpx',
              fontSize: '30rpx',
              color: '#666',
            }
          },
          {
            type: 'image',
            url: '/images/poster_tip.png',
            css: {
              top: '1110rpx',
              left: '210rpx',
              borderRadius: '4rpx',
              width: '150rpx',
              height: '34rpx',
            }
          },
          {
            type: 'image',
            url: `${qrCode}`,
            css: {
              top: '1000rpx',
              left: '510rpx',
              borderRadius: '80rpx',
              width: '160rpx',
              height: '160rpx',
            }
          },
          {
            type: 'image',
            url: '/images/poster_address.png',
            css: {
              top: '810rpx',
              left: '570rpx',
              width: '19rpx',
              height: '23rpx',
            }
          },
        ],
      }
    }
  }
})